<#compress>
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>${goods.brandName!}</title>
    <link href="${ctx}/static/mobileweb/scripts/photoswipe/photoswipe.css" type="text/css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="${ctx}/static/mobileweb/2/css/style.css">
</head>

<body>

<div class="wrap">
    <div class="pctlist">
        <div id="leftTabBox" class="tabBox">
            <div class="hd">
                <ul>
                    <li><a href="#">&nbsp;商品 </a></li>
                    <li><a href="#">环境&nbsp;</a></li>
                </ul>
            </div>
            <div class="bd" id="box">
                <ul id="commodityImages">
                    <#if goods.commodityList?? && goods.commodityList?size gt 0>
                        <#list goods.commodityList as g>
                            <li>
                                <#if g.picture??>
                                    <a href="${ctx}/${g.picture!}">
                                        <img src="${ctx}/static/mobileweb/images/loading.png" data-lazy="true"
                                             data-original="${ctx}/${g.picture?replace('.', "-125x92.")}" alt="">
                                    </a>
                                <#else>
                                    <a href="${ctx}/static/mobileweb/images/shop.png">
                                        <img src="${ctx}/static/mobileweb/images/shop.png" alt="">
                                    </a>
                                </#if>
                                <span>${g.description!}</span>
                            </li>
                        </#list>
                    <#else>
                        <div class="mallactbox" style="text-align:center;padding:20px 0; background:#ECECEC; box-shadow:none;">
                             <span>
                                 <img style="max-width:20%;" src="${ctx}/static/mobileweb/1/images/tipWarIco.jpg" alt=""/>
                             </span>

                            <p style="color:#ccc;margin-top:4px;">暂无商品数据！</p>
                        </div>
                    </#if>
                </ul>
                <ul id="goodsImages">
                    <#if goods.pictures?? && goods.pictures?size gt 0>
                        <#list goods.pictures as g>
                            <li>
                                <#if g??>
                                    <a href="${ctx}/${g!}">
                                        <img src="${ctx}/static/mobileweb/images/loading.png" data-lazy="true"
                                             data-original="${ctx}/${g?replace('.', "-125x92.")}" alt="">
                                    </a>
                                <#else>
                                    <a href="${ctx}/static/mobileweb/images/shop.png">
                                        <img src="${ctx}/static/mobileweb/images/shop.png" alt="">
                                    </a>
                                </#if>
                                <span>${goods.brandName!}</span>
                            </li>
                        </#list>
                    <#else>
                        <div class="mallactbox" style="text-align:center;padding:20px 0; background:#ECECEC; box-shadow:none;">
                             <span>
                                 <img style="max-width:20%;" src="${ctx}/static/mobileweb/1/images/tipWarIco.jpg" alt=""/>
                             </span>

                            <p style="color:#ccc;margin-top:4px;">暂无环境数据！</p>
                        </div>
                    </#if>
                </ul>

            </div>
        </div>

    </div>


</div>
<script src="${ctx}/static/mobileweb/scripts/jquery-1.7.2.min.js"></script>
<script src="${ctx}/static/mobileweb/scripts/TouchSlide.1.1.js"></script>

<script type="text/javascript" src="${ctx}/static/mobileweb/scripts/photoswipe/simple-inheritance.min.js"></script>
<script type="text/javascript" src="${ctx}/static/mobileweb/scripts/photoswipe/jquery.animate-enhanced.min.js"></script>
<script type="text/javascript" src="${ctx}/static/mobileweb/scripts/photoswipe/code-photoswipe-1.0.11.min.js"></script>
<script src="${ctx}/static/mobileweb/scripts/jquery.lazyload.min.js"></script>

<script type="text/javascript">
    document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
        WeixinJSBridge.call('hideToolbar');
    });


    $(document).ready(function(){
        var loaded = {
            commodity: false,
            goods: false
        };

        TouchSlide({ slideCell: "#leftTabBox", endFun: function (idx, tal) {
            var sel = (idx == 0) ? '#commodityImages' : '#goodsImages';
            var li_len = $(sel).find('li').length;
            if (li_len > 0) {
                setTimeout(function () {
                    if (!loaded.commodity || !loaded.goods) {
                        $(sel).find('img[data-lazy="true"]').lazyload({effect: "fadeIn", placeholder: "${ctx}/static/mobileweb/images/no_img.png"});
                                           }
                    if(idx == 0){
                        loaded.commodity = true;
                    } else {
                        loaded.goods = true;
                    }
                }, 300);
                new Code.photoSwipe('a', sel, {
                    getImageSource: function (el) {
                        return el.getAttribute('href');
                    }
                });
            }
        }});
    });


</script>
</body>
</html>
</#compress>